js中原生DOM对象（document、HTMLDocument、Document之间的关系、DOM结构树图、document上选择文档节点、元素的方法和属性）

目录

document、HTMLDocument、Document之间的关系

DOM结构树图

document

选择文档节点

document.getElementById('a')

document.getElementsByTagName('div')

document.getElementsByClassName('a')

document.getElementsByName('a')

document.querySelector('')

document.querySelectorAll('')

节点

节点的4个属性

节点类型

基于节点遍历

div.parentNode

div.childNodes

div.firstChild/lastChild

div.nextSibling

div.previousSibling

div.hasChildNodes()

基于元素节点遍历

div.parentElement

div.children

div.firstElementChild/lastElementChild

div.nextElementSibling

div.previousElementSibling

添加和删除节点

document.createElement('div')

document.createTextNode('')

document.createComment('')

div.appendChild()

div.insertBefore(a,b)

div.removeChild(a)

div.remove()

div.replaceChild(a,b)

改变节点内容

div.innerHTML

div.innerText

改变节点属性

div.setAttribute('class','demo')

div.getAttribute('id')

div.id/div.className

改变节点样式

div.style.height/div.style.backgroundColor/div.style.borderRadius等

document对象代表整个文档，document是由HTMLDocument（）构造函数构造(document.__proto__===HTMLDocument.prototype)，HTMLDocument.prototype对象是由Document（）构造函数构造（HTMLDocument.prototype.__proto__===Document.prototype），Document（）还构造XMLDocument.prototype对象。

图中大写的单词都是构造函数，例如文本对象就是有Text构造函数构造，继承了Text.prototype上面的方法和属性，根据上面Document和HTMLDocument的关系，我们可以类推下图的关系，例如CharacterData（）构造函数构造了Text.prototype对象和Comment.prototype对象（CharacterData.prototype===Text.prototype.__proto__）。然后下图中Document实际上是对应HTMLDocument和XMLDocument，Element实际上是对应HTMLElement和XMLElement。HTMLHeadElement是head标签的构造函数，依次类推，HTMLBodyElement是body标签的构造函数等。当我们想要某类所有的标签都具有某项方法时，我们便可以直接在它的构造函数的原型上进行编程。

首先由于在html中存在唯一的body和head标签，document上以选取好了body和head（document.body和document.head为html中对应的body和head标签）。然后下面将介绍一些document的方法或属性。

通过id选择器选择id='a'的文档对象。

该方法定义在Document.prototype上（XML也可以使用）。

通过标签选择器选择所有div标签文档对象，注意选择出来的对象是一个类数组，不能直接操作，要使用时需选取其中一个对象进行操作。

该方法定义在Document.prototype和Element.prototype上（XML、元素节点也能使用该方法，代表在该元素下选取符合条件的内容）。

通过类选择器选择所有class='a'（相当于css中.a选取元素，该元素可以有多个类名，其中一个为'a'即可）的文档对象，注意选择出来的对象是一个类数组，不能直接操作，要使用时需选取其中一个对象进行操作。

该方法定义在Document.prototype和Element.prototype上（XML、元素节点也能使用该方法，代表在该元素下选取符合条件的内容）。

通过属性选择器选择所有name='a'的文档对象，注意选择出来的对象是一个类数组，不能直接操作，要使用时需选取其中一个对象进行操作，常用于表单对象。

该方法定义在HTMLDocument.prototype上。

通过CSS任何选择器选择，注意只选择符合选择器的第一个对象且不是实时的（如果选择后文档变动，增加了或减少了符合要求的对象，之前的选择结果不会改变）。

该方法定义在Document.prototype和Element.prototype上（XML、元素节点也能使用该方法，代表在该元素下选取符合条件的内容）。

通过CSS任何选择器选择，注意选择所有符合选择器的对象并传入类数组，也不是实时的，除了querySelector的两个方法其他都为实时的。

该方法定义在Document.prototype和Element.prototype上（XML、元素节点也能使用该方法，代表在该元素下选取符合条件的内容）。

div的直接父节点，最顶端为document。

div的所有直接子节点（不包括子孙等），并存储在类数组中。

div的第一个/最后一个直接子节点。

div的下一个兄弟节点。

div的前一个兄弟节点。

判断div是否有孩子节点。

div的直接父元素节点，最顶端为document。

div的所有直接子元素节点（不包括子孙等），并存储在类数组中。

div的第一个/最后一个直接元素子节点。

div的下一个兄弟元素节点。

div的前一个兄弟元素节点。

创建div元素节点，但未插入document文档中。

创建文本节点。

创建注释节点。

在div的最后一个直接子元素后插入节点（相当于push），当div是html中的节点，则相当剪切操作，先删除了后插入。

div为b的直接父节点，在b节点之前插入a节点。

删除div的直接子节点a，并返回a节点。

删除div节点。

div为a，b的直接父节点，用a节点替换b节点，返回b节点。

查看div中的内容，返回字符串形式，可以赋值改变（写入html的字符串形式能被识别为html结构）。

查看div中的所有文本节点，并全部连接成一个字符串返回，可以赋值改变（赋值时，是把div中所有内容替换文本）。

给div标签设置class='demo'。

取出div标签上属性id值。

直接表示div标签的id/class的值，可以直接赋值修改

查看div的height/background-color等属性(注意是查看html中的行间样式属性，无法查看css中写的，即行间样式中没有显式写的返回空串；另外该属性不一定会和显示出来的真实样式一样)，可以直接赋值修改（赋字符串形式且直接写在行间样式上），注意css中以-连接的属性，改为直接大写字母开头；css中的保留字，前面加css并大写单词，例如float则改为cssFloat。